<template>
    <div class="employment-container">
        <el-row :gutter="20">
            <!-- <el-col :span="4" :xs="24">
                <treeIndex :deptOptions="deptOptions" @handleNode="handleNodeClick" :title="'部门信息'"></treeIndex>
            </el-col> -->
            <el-col :span="24" :xs="24">
                <!-- <el-form :inline="true" :model="queryForm" @submit.native.prevent>
                    <el-form-item>
                        <el-input v-model.trim="queryForm.activityId" placeholder="请输入查询条件" clearable />
                    </el-form-item>
                    <el-form-item>
                        <el-button icon="el-icon-search" type="primary" @click="queryData">查询
                        </el-button>
                    </el-form-item>
                </el-form> -->
                <searchForm class="search" :formOptions="formOptions" @onSearch="onSearch" @onReset="onReset"
                    v-show="showSearch">
                    <template>
                        <el-form-item label="违纪类型：">
                            <el-select v-model="queryForm.violationCategory" placeholder="请选择违纪类型" style="width: 100%">
                                <el-option v-for="dict in dict.type.violation_category" :key="dict.value" :label="dict.label"
                                    :value="dict.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="违纪状态：">
                            <el-select v-model="queryForm.violationStatus" placeholder="请选择违纪状态" style="width: 100%">
                                <el-option v-for="dict in dict.type.violation_status" :key="dict.value" :label="dict.label"
                                    :value="dict.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="处分类型：">
                            <el-select v-model="queryForm.violationType" placeholder="请选择处分类型" style="width: 100%">
                                <el-option v-for="dict in dict.type.violation_type" :key="dict.value" :label="dict.label"
                                    :value="dict.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="申诉情况：">
                            <el-select v-model="queryForm.represenStatus" placeholder="请选择申诉情况" style="width: 100%">
                                <el-option v-for="dict in dict.type.represen_status" :key="dict.value" :label="dict.label"
                                    :value="dict.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </template>
                </searchForm>
                <!-- <p><el-button icon="el-icon-plus" type="primary">添加</el-button>
                    <el-button icon="el-icon-edit" type="warning">修改</el-button> -->
                <!-- <el-button icon="el-icon-delete" type="danger" @click="handleDelete">批量删除
                    </el-button> -->
                <el-table v-loading="listLoading" :data="list" :element-loading-text="elementLoadingText"
                    @selection-change="setSelectRows">
                    <el-table-column show-overflow-tooltip type="selection"></el-table-column>
                    <el-table-column show-overflow-tooltip prop="createBy" label="申诉人姓名" />
                    <el-table-column show-overflow-tooltip prop="violationCategory" label="违纪类型" >
                        <template slot-scope="scope">
                            <dict-tag :options="dict.type.violation_category" :value="scope.row.violationCategory"></dict-tag>
                        </template>
                    </el-table-column>

                    <el-table-column show-overflow-tooltip prop="violationType" label="处分类型" >
                        <template slot-scope="scope">
                            <dict-tag :options="dict.type.violation_type" :value="scope.row.violationType"></dict-tag>
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip prop="realScore" label="扣分分值" />
                    <el-table-column show-overflow-tooltip prop="violationDescribe" label="处分说明" />
                    <el-table-column show-overflow-tooltip prop="violationStatus" label="违纪状态" >
                        <template slot-scope="scope">
                            <dict-tag :options="dict.type.violation_status" :value="scope.row.violationStatus"></dict-tag>
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip prop="represenStatus" label="申诉状态" >
                        <template slot-scope="scope">
                            <dict-tag :options="dict.type.represen_status" :value="scope.row.represenStatus"></dict-tag>
                        </template>
                    </el-table-column>
                    
                    <el-table-column show-overflow-tooltip prop="createTime" label="申诉创建时间" />
                    <el-table-column show-overflow-tooltip prop="represenReason" label="申诉理由" />
                    <el-table-column show-overflow-tooltip prop="examineName" label="审核人姓名" />
                    <el-table-column show-overflow-tooltip prop="examineReason" label="审核原因" />
                    
                    <el-table-column show-overflow-tooltip fixed="right" label="操作" width="200">
                        <template v-slot="scope">
                            <el-button type="text" v-hasPermi="['synthesize:appealApproval:approve']" v-show="scope.row.represenStatus == 1 || scope.row.represenStatus == 0" @click="handleAddOrUpdate(scope.row)">审核
                            </el-button>
                            <!-- <el-button type="text" @click="tableDelete(scope.row)">删除
                            </el-button> -->
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination style="float: right;margin-top: 10px;" :background="background"
                    :current-page="queryForm.pageNo" :page-size="queryForm.pageSize" :layout="layout" :total="total"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
            </el-col>
        </el-row>

        <add-or-edit v-if="addOrUpdateVisiable" ref="addOrUpdate" @refreshDataList="onReset">
        </add-or-edit>
    </div>
</template>
  
<script>

// import { getList } from "@/api/table";
import { getList, delData } from "@/api/assessmentCenter/appealApproval";
// import treeIndex from "@/components/tree/index.vue";
import { deptTreeSelect } from "@/api/system/user";
import searchForm from "../../../components/Search/searchForm.vue";
import AddOrEdit from "./addoredit.vue"
import {
  collegeSelect
} from "@/api/information/studentInfor"

export default {
    name: "Activity",
    dicts: ["violation_category", "violation_type", "violation_status", "represen_status"],

    data() {
        return {
            list: null,
            listLoading: true,
            layout: "total, sizes, prev, pager, next, jumper",
            total: 0,
            background: true,
            height: 500,
            selectRows: "",
            deptOptions: [],
            elementLoadingText: "正在加载...",
            queryForm: {
                pageNo: 1,
                pageSize: 10,
                activityId: "",
                violationCategory:null,
                violationStatus:null,
                violationType:null,
                college:null,
                represenStatus:null
            },
            formOptions: [
                {
                    label: "院系",
                    prop: "college",
                    element: "el-select",
                    options: [],
                    placeholder: "请选择院系"
                },
                {
                    label: "姓名",
                    prop: "studentname",
                    element: "el-input",
                    placeholder: "请输入姓名",
                },
            ],
            showSearch: true,
            addOrUpdateVisiable: false,
        };
    },
    components: {
        // treeIndex,
        searchForm,
        AddOrEdit
    },
    created() {
        this.fetchData();
        this.department()
        // this.height = this.$baseTableHeight(1);
    },
    methods: {
        setSelectRows(val) {
            this.selectRows = val;
        },
        editList(row) {
        },
        handleDelete() {
            if (this.selectRows.length > 0) {
                const ids = this.selectRows.map(item => item.id).join();
                this.$baseConfirm(
                    "你确定要删除选中项吗",
                    null,
                    () => {
                        alert(ids);
                    },
                    () => {
                        alert("点击了取消");
                    },
                );
            } else {
                this.$baseMessage("未选中任何行", "error");
                return false;
            }
        },
        tableDelete(row) {
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                delData(row.id).then(res => {
                    if (res.code == 200) {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    }
                    this.fetchData();
                })

            }).catch(() => {

            });
        },
        handleSizeChange(val) {
            this.queryForm.pageSize = val;
            this.fetchData();
        },
        // 获取搜索表单提交的数据
        onSearch(val) {
            // 查询条件和分页数据合并
            const arr = Object.assign(this.queryForm, val);
            this.queryForm.pageNum = 1;
            this.fetchData();
        },
        // 重置
        onReset(data) {
            this.queryForm.pageNum = 1;
            const arr = Object.assign(this.queryForm, data);
            Object.assign(this.queryForm, this.$options.data().queryForm);
            // this.addOrUpdateVisiable = false
            this.fetchData();
        },
        handleCurrentChange(val) {
            this.queryForm.pageNo = val;
            this.fetchData();
        },
        queryData() {
            this.queryForm.pageNo = 1;
            this.fetchData();
        },
        async fetchData() {
            this.listLoading = true;
            const { rows, total } = await getList(this.queryForm);
            this.list = rows;
            this.total = total;
            setTimeout(() => {
                this.listLoading = false;
            }, 300);
        },
        // 获取部门信息
        async department() {
            await collegeSelect().then(res => {
                this.formOptions[0].options = res.data.map(item => {
                    return {
                        value: item.deptName,
                        label: item.deptName
                    };
                });
            });
        },
        handleNodeClick(data) {
            this.queryForm.college = data
            this.fetchData()
        },

        // 新增、修改弹窗
        handleAddOrUpdate(data) {
            /* */
            this.addOrUpdateVisiable = true;
            this.$nextTick(() => {
                this.$refs.addOrUpdate.init(data);
            });
        },
    },
};
</script>
<style lang="scss" scoped>
.employment-container {
    width: 100%;
    height: 100%;
    padding: 15px;
}
</style>
  
